﻿<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript" src="/MySpring/javascript/chart/swfobject.js"></script>

<script type="text/javascript">

function ofc_ready()
{
}

function open_flash_chart_data()
{
    return JSON.stringify(area1);
}



function loadChart(name)
{
	tmp = findSWF("my_chart");
	x = tmp.load( JSON.stringify(name) );

}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}


var area1=
{
  "title":{
    "text":"Area Chart",
    "style":"{font-size: 30px;}"
  },

  "y_legend":{
    "text":"OFC",
    "style":"{font-size: 12px; color:#736AFF;}"
  },

  "elements":[
    {
      "type":      "area",
      "colour":    "#CC3399",
      "fill":      "#343399",
      "fill-alpha": 0.5,
      "text":      "Page views",
      "width":     3,
      "font-size": 10,
      "dot-style": {
				"type":"anchor",
				"sides":3,
				"width":1,
				"tip":"type = anchor\nsides = 3\nhollow" },
      "values" : [
		0,0.37,0.73,1.07,1.36,1.59,1.77,1.87,
		1.89,1.85,1.72,1.53,1.28,0.97,0.63,
		{"value" :0.26, "type":"star", "colour":"#FF0000", "dot-size":10},
		-0.11,-0.48,-0.84,-1.16,-1.43,
		-1.65,-1.80,-1.88,-1.89,-1.82,-1.67,-1.46,-1.19,-0.88]
    }
  ],
  
  "y_axis":{
    "min": -2,
    "max": 2
  }
};

var area2=
{
  "title":{
    "text":"Area Chart",
    "style":"{font-size: 30px;}"
  },

  "y_legend":{
    "text":"OFC",
    "style":"{font-size: 12px; color:#736AFF;}"
  },

  "elements":[
    {
      "type":      "area",
      "colour":    "#CC3399",
      "fill":      "#343399",
      "fill-alpha": 0.5,
      "text":      "Page views",
      "width":     3,
      "font-size": 10,
      "dot-size":  7,
      "tip":       "Hello<br>#val#",
      "values" :   [0,0.37,0.73,1.07,1.36,1.59,1.77,1.87,1.89,1.85,1.72,1.53,1.28,0.97,0.63,0.26,-0.11,-0.48,-0.84,-1.16,-1.43,-1.65,-1.80,-1.88,-1.89,-1.82,-1.67,-1.46,-1.19,-0.88]
    }
  ],

  "x_axis":{
    "ma--x":30,
    "labels": {
      "labels": ["0.00","0.38","0.74","1.07","1.36","1.60","1.77","1.87","1.90","1.85","1.73","1.54",
              "1.28","0.98","0.64","0.27","-0.11","-0.49","-0.84","-1.16","-1.44","-1.66","-1.81",
              "-1.89","-1.89","-1.82","-1.68","-1.47","-1.20","-0.88"]
    }
  },

  "y_axis":{
    "min": -2,
    "max": 2
  }
};

var area3=
{
	"title":{
		"text":"Volume Consumed",
		"style":"font-size: 14px; font-family: Verdana; text-align: center;"},
	"x_axis":{
		"offset": false,
		"labels":{
			"steps":3,
			"labels":[
				"0","1","2","3","4","5",
				"6","7","8","9","10","11",
				"12","13","14","15","16",
				"17","18","19","20","21",
				"22","23","24","25","26",
				"27","28","29","30","31"]
				}
		},
	"bg_colour":"#ffffff",
	"elements":[
		{
			"type":			"area",
			"colour":		"#CC3399",
			"line-style":	{"style":"dash","on":4,"off":4},
			"dot-style":	{"type":"hollow-dot", "width":1, "size":2},
			"values":[
				4,4.37,4.73,5.07,5.36,5.59,5.77,5.87,5.89,5.85,5.72,5.53,5.28,4.97,4.63,4.26,
				3.88,3.51,3.15,2.83,2.56,2.34,2.19,2.11,2.10,2.17,2.32,2.53,2.80,3.11,3.46,3.84],
			"fill-alpha":0.5,
			"width":     1,
			"on-show":	{"type": "mid-slide", "cascade":1, "delay":0.5}
		}
	]
};

var area4=
{
"elements": [
	{
		"type": "area",
		"fill-alpha": 0.4,
		"values": [
			{
			"value": 0,
			"colour": "#D02020",
			"tip": "October 2007 Search Rank<br>Rank 0 \/ 100"
			},
			{
			"value": 0,
			"colour": "#D02020",
			"tip": "November 2007 Search Rank<br>Rank 0 \/ 100"
			},
			{
			"value": 0,
			"colour": "#D02020",
			"tip": "December 2007 Search Rank<br>Rank 0 \/ 100"
			},
			{
			"value": 0,
			"colour": "#D02020",
			"tip": "January 2008 Search Rank<br>Rank 0 \/ 100"
			},
			{
			"value": 0,
			"colour": "#D02020",
			"tip": "February 2008 Search Rank<br>Rank 0 \/ 100"
			},
			{
			"value": 0,
			"colour": "#D02020",
			"tip": "March 2008 Search Rank<br>Rank 0 \/ 100"
			},
			{
			"value": 83,
			"colour": "#D02020",
			"tip": "April 2008 Search Rank<br>Rank 83 \/ 100"
			},
			{
			"value": 76,
			"colour": "#D02020",
			"tip": "May 2008 Search Rank<br>Rank 76 \/ 100"
			},
			{
			"value": 100,
			"colour": "#D02020",
			"tip": "June 2008 Search Rank<br>Rank 100 \/ 100"
			},
			{
			"value": 80,
			"colour": "#D02020",
			"tip": "July 2008 Search Rank<br>Rank 80 \/ 100"
			},
			{
			"value": 73,
			"colour": "#D02020",
			"tip": "August 2008 Search Rank<br>Rank 73 \/ 100"
			},
			{
			"value": 100,
			"colour": "#D02020",
			"tip": "September 2008 Search Rank<br>Rank 100 \/ 100"
			}
		],
		"width": 2,
		"dot-size": 4,
		"halo-size": 2,
		"colour": "#ff9900",
		"fill": "#dbecf6"
	}
	],
	"bg_colour": "#ffffff",
	"x_axis": {
		"colour": "#aaaaaa",
		"grid-colour": "#eeeeee",
		"stroke": 1,
		"tick-height": 4,
		"labels": {
			"labels": [
				"Oct",
				"Nov",
				"Dec",
				"Jan",
				"Feb",
				"Mar",
				"Apr",
				"May",
				"Jun",
				"Jul",
				"Aug",
				"Sep"
			]
		}
	},
	"y_axis": {
		"colour": "#aaaaaa",
		"grid-colour": "#eeeeee",
		"stroke": 1,
		"tick-length": 5,
		"min": 0,
		"max": 105,
		"steps": 50
	},
	"tooltip": {
		"stroke": 1,
		"colour": "#000000",
		"background": "#fffbca"
	}
};
</script>

</head>
<body>
    
<div id="my_chart"></div>
 	
<script type="text/javascript">
	swfobject.embedSWF("/MySpring/javascript/chart/open-flash-chart.swf", "my_chart", "600", "450", "9.0.0");
</script>


<div>

<br>
	<INPUT TYPE=BUTTON OnClick="loadChart(area1);" VALUE="area">
	<INPUT TYPE=BUTTON OnClick="loadChart(area2);" VALUE="area">
	<INPUT TYPE=BUTTON OnClick="loadChart(area3);" VALUE="area">
	<INPUT TYPE=BUTTON OnClick="loadChart(area4);" VALUE="area">
	
</div>

</body>
</html>